import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Card, CardContent } from "@/components/ui/card";
import { Resume } from "@/lib/schemas/resume-form";
import { Fragment } from "react";

export function Template02(props: { resume: Resume }) {
  return (
    <div
      className="bg-white   p-2.5 text-sm text-gray-800 w-[800px] mx-auto"
      style={
        {
          "--primary": props.resume.primary,
          "--secondary": props.resume.secondary,
        } as React.CSSProperties
      }
    >
      {/* Header */}
      <div
        className="bg-[var(--primary)] text-white text-2xl leading-none h-10 flex items-center justify-start px-5 font-inter"
        style={{
          fontFamily:
            "Inter, -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, noto sans, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif",
        }}
      >
        PERSONAL RESUME
      </div>

      {/* 基础信息 */}
      <SectionTitle title={props.resume.title ?? ""} />
      <div className="flex px-5 mt-4">
        <div className="flex-1 flex flex-wrap">
          {props.resume.basicInfo.data.map((item, index) => (
            <div key={index} className="w-1/2 leading-8">
              <span>{item.label}</span>
              <span>：</span>
              <span>{item.val}</span>
            </div>
          ))}
        </div>
        <div className="ml-4">
          <Avatar className="w-30 h-32">
            <AvatarImage src={props.resume.avatar} alt="头像" />
            <AvatarFallback>头像</AvatarFallback>
          </Avatar>
        </div>
      </div>

      {/* 教育经历 */}
      <SectionTitle title={props.resume.education.title} />
      {props.resume.education.data.map((item, index) => (
        <SectionCard
          key={index}
          leftTitle={item.time}
          centerTitle={item.school}
          rightTitle={item.program}
          content={item.content}
        />
      ))}

      {/* 工作经历 */}
      <SectionTitle title={props.resume.experience.title} />
      {props.resume.experience.data.map((item, index) => (
        <SectionCard
          key={index}
          leftTitle={item.time}
          centerTitle={item.company}
          rightTitle={item.role}
          content={item.content}
        />
      ))}

      {/* 其他信息 */}
      {props.resume.externals.map((item, index) => (
        <Fragment key={index}>
          {!!item.title && <SectionTitle title={item.title} />}
          <SectionCard content={item.content} />
        </Fragment>
      ))}
    </div>
  );
}

function SectionTitle(props: { title: string }) {
  return (
    <div className="mt-4 text-2xl text-[var(--primary)] font-semibold px-5 relative">
      <span className="inline-block pb-2.5 border-b-4 border-[var(--primary)]">
        {props.title}
      </span>
      <div className="absolute bottom-0.5 left-5 right-0 h-px bg-[var(--primary)] opacity-50" />
    </div>
  );
}

function SectionCard(props: {
  leftTitle?: string;
  centerTitle?: string;
  rightTitle?: string;
  content?: string[];
}) {
  return (
    <Card className="mt-4 border-0 shadow-none">
      <CardContent className="p-0">
        {(props.leftTitle || props.centerTitle || props.rightTitle) && (
          <div className="px-5 pb-2.5 flex items-end">
            <span className="w-1/5 text-left">{props.leftTitle}</span>
            <span className="text-2xl text-black font-semibold w-3/5 text-center">
              {props.centerTitle}
            </span>
            <span className="w-1/5 text-right">{props.rightTitle}</span>
          </div>
        )}

        <div className="px-5">
          {props.content?.map((item, index) => (
            <div
              key={index}
              className="leading-8 before:content-['·_'] before:inline-block before:mr-2"
            >
              {item}
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}
